import React , { useState ,useEffect} from 'react'
import '../static/less/index.less'
import { indexList } from '../api/index'
import { Carousel } from 'antd'
import { Link } from 'react-router-dom'

export default function Index() {
  //定义
  let [banner, setBanner] = useState([]);
  let [list, setList] = useState([]);

  useEffect(()=>{
    indexList().then(
      content=>{
        // console.log(content);
        let {code,data} = content;
        if(code == 200){
          setBanner(data.recommend);
          setList(data.tab);
        }
        // console.log(banner);
      }
    )
  },[])

  
  // console.log(list);
  
  if(localStorage.getItem("idList")){
    // return 0;
  }
  else{
    localStorage.setItem("idList",'[]');
  }
  

  return (
    <div className='index'>
      <div className='index-top'>
        <div className='top-left'>
          <h2>星漫绘梦</h2>
        </div>
        <div className='top-right'>
            <Link to="/search">
              <input className='s_inp' type="text" placeholder='请搜索漫画'/>
              <button className='s_btn'>搜索</button>
            </Link>
        </div>
      </div>
      <div className='index-middle'>
        <Carousel autoplay>
          {
            banner.map((item,i)=>{
              return(
                <Link to={`/detail?id=${item.did}`} key={i}>
                  <img className='banner_img' src={item.pic} alt="" />
                </Link>
              )
            })
          }
        </Carousel>
      </div>
      <div className='index-bottom'>
          <div className='bottom-top'>
            <Link to="/Category">
              <div className='b_box'>
                <div className='fenlei'></div>
                <h3>分类</h3>
              </div>
            </Link>
            <i></i>
            <Link to="/Bang">
              <div className='b_box'>
                <div className='bangdan'></div>
                <h3>榜单</h3>
              </div>
            </Link>
            <i></i>
            <Link to="/day">
              <div className='b_box'>
                <h3>每日更新</h3>
              </div>
            </Link>
          </div>
          <div className='bottom-bottom'>
            {
              list.map((item,i)=>{
                return(
                  <div className='bigBox' key={i}>
                    <div className='bigTitle'>{item.name}</div>
                    <div className='bottom-box'>
                      {
                        item.list.map((item,j)=>{
                          return(
                            <div className='box' key={j}>
                              <Link to={`/detail?id=${item.id}`}>
                                <img className='box-img' src={item.pic} alt="" />
                                <div className='box-title'>{item.title}</div>
                                <div className='box-text'>{item.info}</div>
                              </Link>
                            </div>
                          )
                        })
                      }
                    </div>
                    <div className='big-bg'></div>
                  </div>
                )
              })
            }
          </div>
      </div>
    </div>
  )
}
